<script setup>
import { reactive, watch } from 'vue'
const obj = reactive({
  name: '张三',
  age: 18
})
// reactive定义的数据不能重新赋值
// 监视reactive定义的对象类型数据时，默认时开启深度监视的
watch(obj, () => {
  console.log('obj修改了')
})
const chegename = () => {
  obj.name += '~'
}
const chegeage = () => {
  obj.age += 1
}
const chegeobj = () => {
  // Object.assign()方法用于将一个或多个对象复制到源对象中（没有修改原有定义的对象，只是替换内容）
  Object.assign(obj, { name: '张', age: 1 })
}
</script>

<template>
  <div>
    <span>姓名：{{ obj.name }}- 年龄：{{ obj.age }} </span><br />
    <button @click="chegeobj">点击改obj</button>
    <button @click="chegename">点击改name</button>
    <button @click="chegeage">点击改age</button>
  </div>
</template> 

